<template>
  <!--  <div class="box-shadow"></div>-->
  <div ref="pageDom" class="all-in-one-page">
    <transition name="slide-in-from-scale">
      <div class="ModelPanel">
        <ModelPanel></ModelPanel>
      </div>
    </transition>
    <div class="warp-box">
      <div class="w-[420px]  z-5 left-panel">
        <she-xiang-tou-tong-ji></she-xiang-tou-tong-ji>
      </div>
      <div :class="[panelShow && 'spread']" class="spread-btn" @click="spread">
        {{ panelShow ? '收回' : '展开' }}
      </div>
      <div class="w-[420px]   z-5 right-panel">
        <dian-zi-wei-she-bei-guan-li></dian-zi-wei-she-bei-guan-li>
        <ren-yuan-liu-dong-xin-xi></ren-yuan-liu-dong-xin-xi>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import BasicPanel from '@/components/BasicPanel/index.vue'
import SheXiangTouTongJi from './panel/摄像头统计/index.vue'
import DianZiWeiSheBeiGuanLi from './panel/电子围栏警告/index.vue'
import RenYuanLiuDongXinXi from './panel/人员流动信息/index.vue'

import { panelToggle } from '@/utils/panelToggle.js'
import ModelPanel from '@/views/HomePage/modelCanvas/index.vue'

const panelShow = ref(true)
import { usePageFade } from '@/utils/usePageFade.js'

const { pageDom } = usePageFade()
const spread = () => {
  panelShow.value = !panelShow.value
  if (!panelShow.value) {
    panelToggle.hidePanel()
  } else {
    panelToggle.showPanel()
  }
}
// 组件挂载完成后执行的钩子函数
onMounted(async () => {
  // 这里可以添加组件挂载后需要执行的代码
  await panelToggle.showPanel()
  console.log('组件挂载完成')
})
</script>
<style lang="scss" scoped>
@import '@/assets/panel.common.css';

.all-in-one-page {
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
}

.ModelPanel {
  width: 100%;
  position: relative;
  height: 100%;
}

.warp-box {
  width: 100%;
  left: 0;
  position: absolute;
  height: 100%;
  pointer-events: none;
  padding-top: 107px;
}

.box-shadow {
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  background-image: url('@/assets/images/shadow.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  box-sizing: content-box;
  position: absolute;
  z-index: var(--side-panel-mask-z-index);
}
</style>
